<template>
  <div class="global-ser">
    <div class="ser-title">
      <div class="cell-left">
        <div class="title">
          {{ title }}
          <el-tooltip
            v-if="btn.info"
            content="Bottom center"
            placement="bottom"
            effect="light"
          >
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </div>
        <div class="ser-bar">
          <el-input
            prefix-icon="el-icon-search"
            placeholder="仪器名称/编码/检验项目"
          >
            <el-button slot="append" @click.native="toSearch" v-if="btn.search"
              >搜索</el-button
            >
          </el-input>
          <el-input
            v-if="
              btn.management ||
                btn.repertory ||
                btn.putRecord ||
                btn.expendRecord
            "
            v-model="materialNameOrNo"
            placeholder="耗材名称、编号"
          >
          </el-input>
          <el-input
            v-if="btn.putRecord || btn.expendRecord"
            v-model="batchNo"
            placeholder="耗材批号"
          >
          </el-input>
          <el-select
            v-if="
              btn.management ||
                btn.repertory ||
                btn.putRecord ||
                btn.expendRecord
            "
            v-model="materialType"
            placeholder="选择耗材类型"
          >
            <el-option
              v-for="item in meterialTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-date-picker
            v-if="btn.putRecord || btn.expendRecord"
            v-model="putRecoredDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择入库日期"
          >
          </el-date-picker>
          <el-input
            v-if="btn.checkRecord"
            v-model="inventoryNo"
            placeholder="盘点单号"
          >
          </el-input>
          <el-date-picker
            v-if="btn.checkRecord"
            v-model="inventoryTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="盘点时间"
          >
          </el-date-picker>
          <el-button slot="append" @click="getList">搜索</el-button>
          <a :class="showCSS" @click="showBox" v-if="btn.box" />
        </div>
      </div>
      <div class="cell-right">
        <el-button v-if="btn.reg" @click.native="toAdd()">
          <i class="el-icon-user "></i>注册
        </el-button>
        <el-button v-if="btn.add" @click.native="toAdd()">
          <i class="el-icon-plus"></i>新增
        </el-button>
        <el-button v-if="btn.export" @click.native="toExport()">
          <i class="el-icon-download "></i>导出
        </el-button>
        <el-button v-if="btn.down"
          ><i class="el-icon-tickets"></i>模板下载</el-button
        >
        <el-button v-if="btn.imp"
          ><i class="el-icon-folder-add"></i>导入</el-button
        >
        <el-button v-if="btn.pd" @click.native="toPd()"
          ><i class="el-icon-tickets"></i>库存盘点</el-button
        >
        <el-button v-if="btn.ref" @click.native="toRefresh()">
          <i class="el-icon-refresh"></i>刷新
        </el-button>
      </div>
    </div>
    <el-form ref="form" :model="form" class="form" v-if="searchBox">
      <div class="ser-text">
        <div class="cell-input">
          <el-row>
            <el-col span="7">
              <el-form-item label="仪器型号：">
                <el-select v-model="form.pro" placeholder="请选择">
                  <el-option
                    v-for="item in dateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col span="7">
              <el-form-item label="仪器型号：">
                <el-select v-model="form.pro" placeholder="请选择">
                  <el-option
                    v-for="item in dateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col span="7">
              <el-form-item label="仪器型号：">
                <el-select v-model="form.pro" placeholder="请选择">
                  <el-option
                    v-for="item in dateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col span="7">
              <el-form-item label="仪器型号：">
                <el-select v-model="form.pro" placeholder="请选择">
                  <el-option
                    v-for="item in dateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col span="7">
              <el-form-item label="仪器型号：">
                <el-select v-model="form.pro" placeholder="请选择">
                  <el-option
                    v-for="item in dateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="cell-btn">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">筛选</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { listQualityControl } from "../../api/business/qualityControl";
import { materialList } from "../../api/business/material";
import { materialInventoryList } from "../../api/business/materialInventory";
import { materialStoreList } from "../../api/business/materialStore";
import { materialLogsList } from "../../api/business/materialLogs";
// import { queryMaterialInventoryLogsList } from '../../api/business/materialInventoryLogs'

export default {
  name: "searchBox",
  props: ["title", "btn"],
  data() {
    return {
      showCSS: "ser-btn",
      checkList: [],
      loading: false,
      redirect: undefined,
      activeName: "1",
      searchBox: false,
      value: "",
      deviceInfo: {},
      dateOptions: [
        {
          value: "选项1",
          label: "最近30天"
        },
        {
          value: "选项2",
          label: "最近一周"
        },
        {
          value: "选项3",
          label: "最近半月"
        },
        {
          value: "选项4",
          label: "最近一年"
        },
        {
          value: "选项5",
          label: "自定义"
        }
      ],
      meterialTypeOptions: [
        {
          value: null,
          label: "选择耗材类型"
        },
        {
          value: 1,
          label: "试剂"
        },
        {
          value: 2,
          label: "质控品"
        }
      ],
      materialNameOrNo: "",
      materialType: null,
      yqname: "",
      batchNo: "",
      putRecoredDate: null,
      inventoryTime: "",
      inventoryNo: "",
      form: {
        dNo: "",
        dname: "",
        dpno: "",
        pro: "",
        sample: "",
        dep: [],
        mainMan: "",
        manager: "",
        date: "",
        factory: "",
        desc: "",
        func: "",
        dimg: "",
        dapp: ""
      }
    };
  },
  watch: {},
  methods: {
    showBox() {
      this.searchBox = !this.searchBox;
      if (this.searchBox) {
        this.showCSS = "ser-btn active";
      } else {
        this.showCSS = "ser-btn ";
      }
    },
    toAdd() {
      this.$emit("func", "add");
    },
    toRefresh() {
      this.$emit("func", "refresh");
    },
    toExport() {
      this.$emit("func", "export");
    },
    // 盘点
    toPd() {
      this.$emit("func", "pd");
    },
    toSearch() {
      this.$emit("func", "search");
    },
    queryMaterialList() {
      let listMaterialForm = {
        materialNameOrNo: this.materialNameOrNo,
        type: this.materialType,
        pageNum: this.btn.pageNum,
        pageSize: this.btn.pageSize
      };
      this.loading = true;
      materialList(listMaterialForm).then(response => {
        this.loading = false;
        let data = {
          rows: response.rows,
          total: response.total,
          materialNameOrNo: listMaterialForm.materialNameOrNo,
          materialType: listMaterialForm.type
        };
        this.$emit("sendParent", data);
      });
    },
    queryIndoorList() {
      let listIndoorForm = {
        qualityNo: this.yqname,
        pageNum: this.btn.pageNum,
        pageSize: this.btn.pageSize
      };
      this.loading = true;
      listQualityControl(listIndoorForm).then(response => {
        this.loading = false;
        this.$emit("sendParent", response);
      });
    },
    queryMaterialInventoryList() {
      let form = {
        materialNameOrNo: this.materialNameOrNo,
        type: this.materialType,
        pageNum: this.btn.pageNum,
        pageSize: this.btn.pageSize
      };
      this.loading = true;
      materialInventoryList(form).then(response => {
        this.loading = false;
        let data = {
          rows: response.rows,
          total: response.total,
          materialNameOrNo: form.materialNameOrNo,
          materialType: form.type
        };
        this.$emit("sendParent", data);
      });
    },
    queryMaterialStoreList() {
      let form = {
        materialNameOrNo: this.materialNameOrNo,
        type: this.materialType,
        batchNo: this.batchNo,
        putRecoredDate: this.putRecoredDate,
        pageNum: this.btn.pageNum,
        pageSize: this.btn.pageSize
      };
      this.loading = true;
      materialStoreList(form).then(response => {
        this.loading = false;
        let data = {
          rows: response.rows,
          total: response.total,
          materialNameOrNo: form.materialNameOrNo,
          materialType: form.type,
          batchNo: form.batchNo,
          putRecoredDate: form.putRecoredDate
        };
        console.log(data);
        this.$emit("sendParent", data);
      });
    },
    queryMaterialLogsList() {
      let form = {
        materialNameOrNo: this.materialNameOrNo,
        type: this.materialType,
        batchNo: this.batchNo,
        putRecoredDate: this.putRecoredDate,
        pageNum: this.btn.pageNum,
        pageSize: this.btn.pageSize
      };
      this.loading = true;
      materialLogsList(form).then(response => {
        this.loading = false;
        let data = {
          rows: response.rows,
          total: response.total,
          materialNameOrNo: form.materialNameOrNo,
          materialType: form.type,
          batchNo: form.batchNo,
          putRecoredDate: form.putRecoredDate
        };
        this.$emit("sendParent", data);
      });
    },
    queryMaterialInventoryLogsList() {
      let form = {
        inventoryTime: this.inventoryTime,
        inventoryNo: this.inventoryNo,
        pageNum: this.btn.pageNum,
        pageSize: this.btn.pageSize
      };
      this.loading = true;
      queryMaterialInventoryLogsList(form).then(response => {
        this.loading = false;
        let data = {
          rows: response.rows,
          total: response.total,
          inventoryTime: form.inventoryTime,
          inventoryNo: form.inventoryNo
        };
        this.$emit("sendParent", data);
      });
    },
    getList() {
      if (this.btn.indoor) {
        this.queryIndoorList();
      }
      if (this.btn.management) {
        this.queryMaterialList();
      }
      if (this.btn.repertory) {
        this.queryMaterialInventoryList();
      }
      if (this.btn.putRecord) {
        this.queryMaterialStoreList();
      }
      if (this.btn.expendRecord) {
        this.queryMaterialLogsList();
      }
      if (this.btn.checkRecord) {
        this.queryMaterialInventoryLogsList();
      }
    }
  }
};
</script>
